<template>
  <div id="homePage">
    <!-- 顶部搜索区域 -->
    <div class="search-bar">
      <a-input-search
        placeholder="搜索你想要的图片"
        v-model:value="searchParams.searchText"
        enter-button
        size="large"
        @search="doSearch"
      />
    </div>

    <!-- 分类条展示区域 -->
    <a-tabs v-model:activeKey="selectedCategory" @change="doSearch" class="category-tabs">
      <a-tab-pane key="all" tab="全部" />
      <a-tab-pane v-for="category in categoryList" :key="category" :tab="category" />
    </a-tabs>

    <!-- 标签筛选展示区域 -->
    <div class="tag-bar">
      <span style="margin-right: 8px">标签：</span>
      <a-space :size="[0, 8]" wrap>
        <a-checkable-tag
          class="check-tag-bar"
          v-for="(tag, index) in tagList"
          :key="tag"
          v-model:checked="selectedTagList[index]"
          @change="doSearch"
        >
          {{ tag }}
        </a-checkable-tag>
      </a-space>
    </div>

    <!-- 图片展示区域 -->
    <div class="picture-bar">
      <PictureList :dataList="dataList" :loading="loading" :showOption="true"></PictureList>
      <!-- 加载更多提示 -->
      <div v-if="loadingMore" class="loading-more">
        <a-spin size="middle" />
        <span style="margin-left: 8px">加载更多...</span>
      </div>
      <!-- 没有更多数据提示 -->
      <div v-if="!hasMore && !loading && !loadingMore" class="no-more">
        <a-result title="已经到底啦~">
          <template #icon>
            <SmileTwoTone />
          </template>
        </a-result>
      </div>
    </div>

    <!-- 分页控件 ( 已改为下拉刷新 ) -->
    <!--    &lt;!&ndash; 分页控件 &ndash;&gt;-->
    <!--    <div class="pagination-container">-->
    <!--      <a-pagination-->
    <!--        v-model:current="searchParams.current"-->
    <!--        :page-size-options="[ '10', '12', '16', '20']"-->
    <!--        :page-size="searchParams.pageSize"-->
    <!--        :total="total"-->
    <!--        @change="handlePageChange"-->
    <!--        show-size-changer-->
    <!--      />-->
    <!--    </div>-->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import {
  listPictureTagCategoryUsingGet,
  listPictureVoByPageByCacheUsingPost,
} from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import PictureList from '@/components/PictureList.vue'
import { SmileTwoTone } from '@ant-design/icons-vue'

const router = useRouter()

// 定义数据源
const dataList = ref<API.PictureVO[]>([])
const total = ref(0)
const loading = ref(true)

// 定义查询参数
const searchParams = reactive<API.PictureQueryDTO>({
  current: 1,
  pageSize: 16, // 瀑布流每页显示更多内容
  // 排序条件
  sortField: 'createTime',
  sortOrder: 'descend',
})

// 已改为下拉刷新
// // 分页变化处理
// const handlePageChange = (page: number, pageSize: number) => {
//   searchParams.current = page
//   searchParams.pageSize = pageSize
//   fetchData()
// }
// -------------- 主页下拉刷新 ------------------
// 是否还有更多的数据
const hasMore = ref<boolean>(true)
// 防止重复请求的标志
let isProcessing = false
// 定义底部加载时的动画
const loadingMore = ref(false)

// 调用api请求数据
const fetchData = async () => {
  // 判断是否需要加载更多数据
  const isLoadingMore = Number(searchParams.current) > 1
  if (isLoadingMore) {
    loadingMore.value = true
  } else {
    loading.value = true
  }
  // 如果正在处理请求，则直接返回，防止重复请求
  if (isProcessing) {
    return
  }
  isProcessing = true

  // 构建查询参数
  const params = {
    ...searchParams,
    tags: [] as string[],
  }
  // 添加分类条件
  if (selectedCategory.value !== 'all') {
    params.category = selectedCategory.value
  }
  // 添加标签条件
  selectedTagList.value.forEach((checked, index) => {
    if (checked) params.tags.push(tagList.value[index])
  })

  try {
    const res = await listPictureVoByPageByCacheUsingPost(params)
    if (res.data?.code === 0 && res.data?.data) {
      // dataList.value = res.data.data.records || []
      const newData = res.data.data.records || []
      total.value = res.data.data.total || 0

      // 加载更多数据时累加数据，首次加载时替换数据
      if (isLoadingMore) {
        dataList.value = [...dataList.value, ...newData]
      } else {
        dataList.value = newData
      }
      // 判断是否还有更多数据
      hasMore.value = dataList.value.length < total.value
    } else {
      message.error('数据获取失败')
    }
  } catch (err) {
    message.error('请求异常')
  } finally {
    loading.value = false
    // 刷新完成，重置标志
    loadingMore.value = false
    isProcessing = false
  }
}

// 分类和标签数据
const categoryList = ref<string[]>([])
const selectedCategory = ref<string>('all')
const tagList = ref<string[]>([])
const selectedTagList = ref<boolean[]>([])

// 获取分类和标签
const getTagCategoryOptions = async () => {
  try {
    const res = await listPictureTagCategoryUsingGet()
    if (res.data.code === 0 && res.data.data) {
      categoryList.value = res.data.data.categoryList ?? []
      tagList.value = res.data.data.tagList ?? []
      selectedTagList.value = new Array(tagList.value.length).fill(false)
    } else {
      message.error('加载分类标签失败：' + res.data.message)
    }
  } catch (err) {
    message.error('分类标签请求异常')
  }
}

// 跳转图片详情
const doToPictureInfo = (picture: API.PictureVO) => {
  router.push({ path: `/picture/${picture.id}` })
}

// 页面滚动监听处理
const handleScroll = () => {
  // 避免重复请求、无更多数据或加载中时触发
  if (loading.value || loadingMore.value || !hasMore.value || isProcessing) {
    return
  }

  // 计算页面滚动位置：距离底部小于 200px 时加载更多
  const scrollTop = window.scrollY || document.documentElement.scrollTop
  const clientHeight = document.documentElement.clientHeight || window.innerHeight
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

  if (scrollTop + clientHeight >= scrollHeight - 100) {
    // 滚动到底部附近，加载更多
    searchParams.current = (searchParams.current ?? 0) + 1
    fetchData()
  }
}

// 页面挂载时初始化
onMounted(() => {
  // 获取数据
  fetchData()
  // 获取后台的分类和标签
  getTagCategoryOptions()
  // 监听页面滚动事件
  window.addEventListener('scroll', handleScroll)
})

// 页面卸载时移除滚动监听（防止内存泄漏）
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 执行搜索方法
const doSearch = () => {
  // 重置页码
  searchParams.current = 1
  // 重置数据和状态
  dataList.value = []
  hasMore.value = true
  // 刷新数据
  fetchData()
}
</script>

<style scoped>
#homePage {
  margin: 10px auto;
  max-width: 1800px; /* 限制最大宽度，避免超宽屏幕显示过散 */
}

/* 搜索区域样式优化 */
.search-bar {
  max-width: 520px;
  margin: 0 auto 20px;
  padding: 0 10px;
}

/* 分类标签样式优化 */
.category-tabs {
  padding: 0 10px;
}

/* 标签筛选区域样式 */
.tag-bar {
  margin-bottom: 18px;
  padding: 10px;
  border-radius: 8px;
}

.check-tag-bar {
  margin: 4px 6px;
  transition: all 0.2s ease;
}

.check-tag-bar.ant-tag-checkable-checked {
  background-color: #4caf50;
  color: white;
}

/* 图片展示区域样式优化 */
.picture-bar {
  padding-bottom: 40px; /* 底部留空间 */
}

/* 加载更多样式 */
.loading-more {
  text-align: center;
  padding: 20px 0;
  color: #666;
}
/* 没有更多数据样式 */
.no-more {
  text-align: center;
  padding: 40px 0;
}

/* 已改为下拉刷新 */
/*!* 分页控件样式：新添加部分 *!
.pagination-container {
  margin: 40px auto 20px;
  text-align: right;
  padding: 0 10px;
}*/
</style>
